<template>
  <view class="page">
    <CommonNavbar
      title="添加关联"
      :showBack="true"
    ></CommonNavbar>
    <view class="main">
      <view>
        <text class="text-sm">请输入小朋友芽号</text>
        <text class="text-xs text-lightgray">(10位数)</text>
      </view>
      <view class="margin-top-sm margin-bottom-lg">
        <!-- <up-code-input
          size="20%"
          :maxlength="state.maxLength"
        ></up-code-input> -->
        <up-code-input
          borderColor="#6D9319"
          v-model="state.code"
          :maxlength="state.maxLength"
          size="35"
        ></up-code-input>
      </view>

      <up-button
        type="primary"
        shape="circle"
        text="发送申请"
        :disabled="state.code.length !== state.maxLength"
        :loading="state.isLoading"
        @click="handleSubmit"
      ></up-button>
    </view>
  </view>
</template>

<script setup>
import { reactive, computed } from 'vue';
import { sendShowIdApi } from '@/api/me';
const state = reactive({
  code: '',
  maxLength: 10,
  isLoading: false
});
const handleSubmit = async () => {
  state.isLoading = true;
  const params = {
    showId: state.code
  };
  const result = await sendShowIdApi(params);
  console.log(result);
  if (result.code === 200) {
    state.isLoading = false;
    uni.$u.toast('申请已发送');
    uni.navigateBack();
  } else {
    uni.$u.toast(result.msg);
    state.isLoading = false;
  }
};
</script>

<style lang="scss" scoped>
.page {
  background: white;

  .main {
    padding-top: 10vh;
  }
}
</style>
